<template>
  <div class="register">
    <Row type="flex" justify="space-between">
      <Col :md="7">
        <div class="imgwrap" :style="styles"></div>
      </Col>
      <Col :md="17" :xs="24" class="user-register">
        <Form ref="userInfo" :model="userInfo" :rules="isInfo">
          <Row justify="center">
            <Col :md="10" :xs="10" class="title">
              <h1>欢迎注册未来社区</h1>
              <small> 每一天，乐在沟通！ </small>
            </Col>
          </Row>

          <Row justify="center">
            <Col :md="10" :xs="10">
              <FormItem prop="username">
                <Input
                  v-model="userInfo.username"
                  placeholder="请输入昵称"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row justify="center">
            <Col :md="10" :xs="10">
              <FormItem prop="phone">
                <Input
                  v-model="userInfo.phone"
                  placeholder="请输入手机号"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row justify="center">
            <Col :md="6" :xs="6">
              <FormItem prop="smsCode">
                <Input
                  v-model="userInfo.smsCode"
                  placeholder="请输入验证码"
                ></Input>
              </FormItem>
            </Col>
            <Col :md="4" :xs="4">
              <FormItem>
                <Button type="primary" @click="getCode(userInfo.phone)"
                  >获取验证码</Button
                >
              </FormItem>
            </Col>
          </Row>
          <Row justify="center">
            <Col :md="10" :xs="10">
              <FormItem prop="password">
                <Input
                  v-model="userInfo.password"
                  placeholder="请输入密码"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row justify="center">
            <Col :md="10" :xs="10">
              <FormItem prop="confirmPassword">
                <Input
                  v-model="userInfo.confirmPassword"
                  placeholder="请确认密码"
                ></Input>
              </FormItem>
            </Col>
          </Row>
          <Row justify="center">
            <Col :md="10" :xs="10">
              <FormItem>
                <Button
                  class="rgs-btn"
                  long
                  type="primary"
                  @click="handleSubmit('userInfo')"
                  >注册</Button
                >
              </FormItem>
            </Col>
          </Row>
          <Row justify="center">
            <Col :md="10" :xs="10" class="link">
              <router-link to="/login">已经有账号？直接去登录</router-link>
            </Col>
          </Row>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      timer: "",
      imgNum: "1",
      userInfo: {
        username: "",
        phone: "",
        smsCode: "",
        password: "",
        confirmPassword:"",
      },
      isInfo: {
        username: [
          {
            required: true,
            message: "昵称不能为空",
            trigger: "blur",
          },
          {
            required:true,
            validator:(ru,val,cb) =>{this.isUsername(val,cb)},
            trigger:"blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
          {
            required: true,
            validator: (rulu, val, cb) => {
              this.isPhone(val, cb);
            },
            trigger:"blur"
          },
        ],
        smsCode: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
          {
            required: true,
            validator: (rulu, val, cb) => {
              this.isCode(val, cb);
            },
            trigger: "submit",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码不能小于6位",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            validator: this.isTrue,
            message: "两次输入的密码不一致",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    styles() {
      return {
        backgroundImage:
          "url(https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-" +
          this.imgNum +
          ".jpg)",
      };
    },
  },
  methods: {
    isUsername(val,cb){
      let isVal =/^[\u4e00-\u9fa5]{0,}$/
      if(isVal.test(val)){
        cb()
      }else{
        // cb(new Error("昵称必须为汉字"))
        cb()
      }
    },
    isCode(val, cb) {
      if (this.isCodeVal) {
           cb()
      } else {
        return cb(new Error("请先获取验证码"));
      }
    },
    isPhone(val, cb) {
         let isVal =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if(isVal.test(val)){
          this.$userApi.isPhone({
            data:{
              phone:val
            }
          }).then(res => {
            console.log(res);
            if(res.ret ===200){
            cb()
            }else{
              cb(new Error("手机号码已经被注册"))
            }
          })
        // cb()
      }else{
        cb(new Error("请输入正确的电话号码"))
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$userApi.register({
            data: this.userInfo,
          }).then((res) => {
            console.log(res);
            if(res.ret =="200"){
            this.$router.push("./login"); 
            }
          });
        } else {
          this.$Message.error("注册失败!");
        }
      });
    },
    isTrue() {
      return this.userInfo.password === this.userInfo.confirmPassword;
    },
    changeImg() {
      this.timer = setInterval(() => {
        this.imgNum++;
        if (this.imgNum == 5) {
          this.imgNum = 1;
        }
      }, 3000);
    },
    getCode(phone) {
      let formData = new FormData();
      formData.append("phone", phone);
      fetch("/user/sms.php", {
        method: "post",
        body: formData,
      })
        .then((res) => res.json())
        .then((res) => {
          console.log(res);
this.isCodeVal = "1";
if(res.ret ===200){
  this.$Message.success("发送成功，请注意查收！")
}else{
  if(res.msg.result){
    this.$Message.error(res.msg.result)
  }else{
    this.$Message.error("获取验证码失败")
  }
}

        });
    },
  },
  mounted() {
    this.changeImg();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100vw;
  height: 100vh;
  .title {
    text-align: left;
    white-space: nowrap;
    h1 {
      margin: 20px 0;
    }
    small {
      display: block;
      font-size: 20px;
      margin: 10px 0;
    }
  }

  .rgs-btn {
    margin: 5px 0;
    height: 40px;
  }

  .imgwrap {
    width: 100%;
    height: 100vh;
    background-position: center;
  }
  .user-register {
    margin-top: 20vh;
  }
  .link {
    text-align: right;
  }
}
</style>